var getAllBtn = document.getElementById('get-all-btn');
var list = document.getElementById('list');
var postBtn = document.getElementById('post-btn');

getAllBtn.onclick = function () {
  var xhr;
  if (window.XMLHttpRequest) { // 现代浏览器
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // IE
    xhr = new ActiveXObject('Msxml2.XMLHTTP');
  }

  // 事件处理
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
        // xhr.responseText 是 json 字符串
        var res = JSON.parse(xhr.responseText);

        render(res.data);
        console.log('请求成功：', res);
      } else {
        console.log('请求失败了', xhr.status, xhr.statusText);
      }
    }
  }

  xhr.open('GET', '/users/all?id=1', true);
  xhr.send(null);
}

function render(data) {
  list.innerHTML = '';
  for (var i = 0; i < data.length; i++) {
    var li = document.createElement('li');
    li.innerHTML = data[i];

    list.appendChild(li);
  }
}


// post 示例
postBtn.onclick = function () {
  var xhr;
  if (window.XMLHttpRequest) { // 现代浏览器
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // IE
    xhr = new ActiveXObject('Msxml2.XMLHTTP');
  }

  // 事件处理
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) { // 请求完成
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { // 请求成功
        // xhr.responseText 请求返回的数据
        console.log('请求成功：', xhr.responseText);
      } else {
        console.log('请求失败了', xhr.status, xhr.statusText);
      }
    }
  }

  // POST 请求上一步应该这样写
  xhr.open('POST', '/users/login', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头
  xhr.send('id=1&name=jack'); // 发送请求并携带参数
}